<template>
  <div>
    <div v-if="!loading">
      <custom-card title="基本信息" class="mt-30" v-if="detail.pdsFileModelBaseDto">
        <template id="">
          <el-row style="margin-bottom:0">
            <el-col :span="16">
              <el-col :span="12" v-for="(item,index) in basicInfo" :key="index">
                <el-row class="prod-info">
                  <el-col :span="8" style="text-align:right;padding-right:10px" class="label-bold">
                    {{item.label}}：
                  </el-col>
                  <el-col :span="16" v-if="item.name!='standard'">
                    {{detail.pdsFileModelBaseDto[item.name]}} {{item.append}}
                  </el-col>
                  <el-col :span="16" v-if="item.name=='standard'&&detail.pdsFileModelBaseDto.standard==2">
                    {{language=='en'?'UsStandard':'美标'}}
                  </el-col>
                  <el-col :span="16" v-if="item.name=='standard'&&detail.pdsFileModelBaseDto.standard==1">
                    {{language=='en'?'EnStandard':'欧标'}}
                  </el-col>
                </el-row>
              </el-col>
            </el-col>
            <el-col :span="8">
              <el-carousel class="prod-img" :autoplay="pageType!='export'">
                <el-carousel-item v-for="(item,index) in detail.pdsFileModelPbsPicsList" :key="index">
                  <img :src="baseImgUrl+item.url" alt="" class="prod-img">
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>
          <div class="more-item">
            <span class="label-bold"> 客户：</span> {{detail.pdsFileModelBaseDto.customerNames}}</div>
          <div class="more-item">
            <span class="label-bold">认证种类：</span> {{detail.pdsFileModelBaseDto.certValues}}</div>
          <div class="more-item">
            <span class="label-bold">其他说明：</span> {{detail.pdsFileModelBaseDto.remark}}</div>
          <div class="more-item" v-if="detail.pdsFileModelBaseDto.variation==1">
            <span class="label-bold">差异说明：</span>
            {{detail.pdsFileModelBaseDto.differenceRemark}}
          </div>
          <div class="more-item">
            <span class="label-bold">销售区域／国家：</span> {{detail.salesAreasStr}}</div>
          <div class="more-item">
            <span class="label-bold">销售区域备注：</span> {{detail.pdsFileModelBaseDto.salesAreaRemark}}
          </div>
        </template>
      </custom-card>
      <custom-card class="mt-30" title="模组信息">
        <el-collapse v-model="activatedNames">
          <el-collapse-item :title="language=='en'?form.itemNameEn:form.itemNameCn" :name="index" v-for="(form,index) in detail.showModules" :key="index">
            <el-col :span="8" v-for="(item,idx) in form.paramsList" :key="idx">
              <el-row class="prod-info">
                <el-col :span="10" style="text-align:right;padding-right:10px" class="label-bold">
                  {{language=='en'?item.paramNameEn:item.paramNameCn}}：
                </el-col>
                <el-col :span="14" v-if="item.paramTypeDv!='range'&&item.paramTypeDv!='radio'">
                  {{item.paramValue}}{{item.paramUnitDv}}
                </el-col>
                <el-col :span="14" v-if="item.paramTypeDv=='range'">
                  {{item.paramValue}}～{{item.paramMaxValue}}{{item.paramUnitDv}}
                </el-col>
                <el-col :span="14" v-if="item.paramTypeDv=='radio'">
                  <span v-if="item.paramValue==1">{{language=='en'?'Y':'是'}}</span>
                  <span v-if="item.paramValue==0">{{language=='en'?'N':'否'}}</span>
                </el-col>
              </el-row>
            </el-col>
          </el-collapse-item>

        </el-collapse>
      </custom-card>
      <custom-card title="产品特征" class="mt-30">
        <el-table :data="detail.showFeaturesList" border style="width: 100%">
          <el-table-column label="序号" min-width="20%" width="120px" align="center">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="特征" min-width="80%">
            <template slot-scope="scope">
              {{language=='en'?scope.row.nameEn:scope.row.nameCn}}
            </template>
          </el-table-column>
        </el-table>
      </custom-card>
      <custom-card title="附件" class="mt-30">
        <el-table :data="detail.showAccessoriesList" border style="width: 100%">
          <el-table-column label="附件" min-width="50%" align="center">
            <template slot-scope="scope">
              {{language=='en'?scope.row.nameEn:scope.row.nameCn}}
            </template>
          </el-table-column>
          <el-table-column label="数量" min-width="15%" align="center">
            <template slot-scope="scope">
              {{scope.row.accessoryQuantity}}
            </template>
          </el-table-column>
        </el-table>
      </custom-card>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import CustomCard from '@/components/CustomCard/index';
import { modelDetail } from '@/api/product/model/add';

export default {
  name: 'DetailPbs',
  components: {
    CustomCard
  },
  // props: {
  //   modelPbsId: {
  //     type: String,
  //     default: ''
  //   }
  // },
  watch: {

  },
  data() {
    return {
      detail: {},
      loading: false,
      pageType: null,
      activatedNames: [],
      baseImgUrl: process.env.BASE_FILE_URL + '/',
      basicInfo: [
        {
          label: '机型号',
          name: 'plmModelNo'
        },
        {
          label: '产品类别',
          name: 'productCategoryName'
        },
        {
          label: '产品名称',
          name: 'name'
        },
        {
          label: '产品型号',
          name: 'modelNo'
        },
        {
          label: '产品状态',
          name: 'productStatusDvValue'
        },
        {
          label: '项目书编号',
          name: 'planningNo'
        },
        {
          label: '市场定位',
          name: 'marketPositionDvValue'
        },
        {
          label: '业务模式',
          name: 'bizModelDvValue'
        },
        {
          label: '品牌',
          name: 'brandDvValue'
        },
        {
          label: '推荐使用',
          name: 'recommend'
        },
        {
          label: '上市年份',
          name: 'salesYear'
        },
        {
          label: '使用寿命',
          name: 'life',
          append: '小时'
        },
        {
          label: '专利',
          name: 'patent'
        },
        {
          label: '标准',
          name: 'standard'
        }
      ]
    };
  },
  computed: {
    ...mapGetters(['elements', 'language'])
  },
  created() {
    this.pageType = this.$route.query.type
    this.getModelDetail()
  },
  activated() {
    this.pageType = this.$route.query.type
    this.getModelDetail();
  },
  methods: {
    getModelDetail() {
      this.loading = true;
      modelDetail({
        modelPbsId: this.$route.query.modelPbsId,
        variation: 0
      }).then(res => {
        this.loading = false;
        res.data.pdsFileModelBaseDto.standard = res.data.standard;
        this.$set(this, 'detail', res.data);
        res.data.showModules.map((item, index) => {
          this.activatedNames.push(index);
          return item;
        });
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../../styles/prod.scss";

.more-item {
  font-size: 14px;
  color: #333;
  margin-top: 0 !important;
  padding-left: 20px;
  position: relative;
  top: -40px;
  margin-bottom: 8px !important;
  line-height: 250%;
}

.label-bold {
  font-weight: bold;
}
</style>
